<template>
  <div class="data-card TagsBG">
    <div class="title">{{ title }}</div>
    <div class="value-container">
      <span class="value">{{ currentValue }}</span>
      <span class="unit">{{ unit }}</span>
      <span v-if="isIncrease" class="increase-icon">↑</span>
      <span v-else class="decrease-icon">↓</span>
    </div>
    <div class="target-value">目标值：{{ targetValue }}{{ unit }}</div>
  </div>
</template>

<script setup>
// 接收外部传入的属性
const props = defineProps({
  title: {
    type: String,
    default: "数据目录数",
  },
  currentValue: {
    type: Number,
    required: true,
    default: 0,
  },
  targetValue: {
    type: Number,
    required: true,
    default: 1200,
  },
  unit: {
    type: String,
    default: "个",
  },
  isIncrease: {
    type: Boolean,
    default: true,
  },
});
</script>

<style scoped>
.data-card {
  color: white;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 0, 255, 0.3);
  max-width: 220px;
  max-height: 120px;
}

.title {
  font-size: 26px;
  margin-bottom: 10px;
  color: #CFEAFF;

}

.value-container {
  font-size: 28px;
  margin-bottom: 10px;
  color: #37C9C9;

}

.value {
    color: #37C9C9;
}

.unit {
  font-size: 24px;
  color: #37C9C9;

}

.increase-icon {
  font-size: 24px;
  color: #37C9C9;
}

.decrease-icon {
  color: #ff6666;
  font-size: 24px;
}

.target-value {
  font-size: 18px;
}
</style>
